<style scoped>
.myinfo{
    background-image:linear-gradient(to right, #FD9126, #FF5000);
    padding:20px 0px;
}

.myinfo img{
    display: block;
    margin:0px auto;
    width:50px;
    height:50px;
    border-radius: 50%;
    border:2px solid #FFF;
}

.myinfo p{
    color:#FFF;
    font-size:16px;
    margin-top:14px;
    text-align: center;
}

.nav{
    width:100%;
    box-sizing: border-box;
}


.nav a {
    display: block;
    float: left;
    box-sizing: border-box;
    width:33.3333%;
    padding:15px 0px;
    text-decoration: none;
    color:#5D656B;
    position: relative;
    border-right:1px solid #E7E7E7;
    border-bottom:1px solid #E7E7E7;
}

.nav a div {
    width:22px;
    height:22px;
    background-repeat: no-repeat;
    background-size: 22px;
    margin:3px auto;
}

.nav a p {
    font-size:12px;
    text-align: center;
}

.nav a.cart div.num{
    position: absolute;
    top:0px;
    left:50%;
    margin-left:10px;
    font-family: 'Arial';
    width:16px;
    height:16px;
    line-height: 16px;
    border-radius: 8px;
    background-color: #FF0000;
    color:#FFF;
    text-align: center;
    font-size:12px;
}

.icon-home{
    background-image: url(../assets/home.png);
}

.icon-cart{
    background-image: url(../assets/cart.png);
}

.icon-form{
    background-image: url(../assets/form.png);
}

.icon-people{
    background-image: url(../assets/people.png);
}

</style>
<template>
    <div>
        <div class="myinfo">
            <img src="https://gd3.alicdn.com/imgextra/i3/2851418856/TB2_lziphPI8KJjSspfXXcCFXXa_!!2851418856.jpg" alt="" class="headshow">
            <p>周淑怡</p>
        </div>
        <div class="nav">
            <router-link to="/mlapp">
                <div class="icon-home"></div>
                <p>首页</p>
            </router-link>
            <router-link to="/mlapp/cart" class="cart">
                <div class="icon-cart"></div>
                <p>购物车</p>
                <div class="num" v-if="cart.length!==0">{{cart.length}}</div>
            </router-link>
            <router-link to="/mlapp/order">
                <div class="icon-form"></div>
                <p>订单列表</p>
            </router-link>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
    computed:{
        ...mapState(['cart'])
    }
}
</script>
